<template>
  <el-form v-bind="$attrs" ref="form" :model="formSubmit" :rules="formRulesData">
    <slot name="form-element" :formData="formSubmit"></slot>
  </el-form>
</template>

<script>

  import GeneralFormReqeust from 'framework/components/form/request/GeneralFormReqeust'

  export default {
    name: "UiForm",
    data() {
      return {
        isSubmit: true,
        formSubmit: {},
        formRulesData: this.formRule,
      }
    },
    props: {
      request: {
        default: new GeneralFormReqeust()
      },
      formSubmitData: {
        default: () => {
          return {}
        }
      },
      formRule: {
        default: () => {
          return {}
        }
      }
    },
    mounted() {
      this.formSubmit = Object.assign({}, this.formSubmit, this.formSubmitData);
    },
    methods: {
      form() {
        return this.$refs['form'];
      },
      formData(formData = null) {
        if (formData !== null) {
          this.formSubmit = Object.assign({}, this.formSubmit, formData);
        }
        return this.formSubmit;
      },
      formRules(formRules = null) {
        if (formRules !== null) {
          this.formRulesData = Object.assign({}, this.formRulesData, formRules);

          this.form().resetFields();
        }
        return this.formRulesData;
      },
      async submit() {
        this.isSubmit = false;

        try {
          if (await this.form().validate()) {
            return await this.request.submit(this.formSubmit);
          }
        } catch (e) {
          throw e;
        } finally {
          this.isSubmit = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
